<template>
  <div style="margin-left: 3%;margin-right: 3%">

    <my-head></my-head>
    <!--轮播图-->
      <el-row>
        <el-col :span="24">
          <el-carousel indicator-position="outside">
          <el-carousel-item v-for="item in items" :key="item.id">
            <el-image
              style="width:100%; height: 100%"
              :src="item.url"
            >
            </el-image>
          </el-carousel-item>
        </el-carousel>
        </el-col>
      </el-row>
    <!--正在上映-->
      <el-row :span="24">

          <el-tabs type="border-card">
            <el-tab-pane label="正在上映">

              <el-col :span="5" v-for="(o, index) in movies" :key="index" :offset="index > 5 ? 5 : index">
                <el-card :body-style="{ padding: '10px' }" style="height: 250px;width: 200px">
                  <el-dropdown>
                      <span class="el-dropdown-link">
                        <img src="o.movieImage" class="image">
                      </span>
                    <el-dropdown-menu slot="dropdown">
                      <div>类型:{{o.movieType}}</div>
                      <div>语言:{{o.movieLanguage}}</div>
                      <div>地区:{{o.movieArea}}</div>
                      <div>导演:{{o.movieDetail.dirctor}}</div>
                      <div>演员:{{o.movieDetail.actor}}</div>
                      <div>上映时间:{{o.movieDetail.movieTime}}</div>
                    </el-dropdown-menu>
                  </el-dropdown>


                  <div style="padding: 14px;">
                    <span>{{o.movieName}}</span>
                    <span>{{o.movieScore}}</span>

                    <div class="bottom clearfix">
                      <time class="time">{{ o.releaseTime}}</time>
                      <el-button type="text" class="button">选座购票</el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>

            </el-tab-pane>
            <!--即将上映-->
            <el-tab-pane label="即将上映">
              <el-col :span="5" v-for="(o, index) in movieswill" :key="index" :offset="index > 5 ? 5 : index">
                <el-card :body-style="{ padding: '10px' }" style="height: 250px;width: 200px">
                <!--下拉信息-->
                  <el-dropdown>
                      <span class="el-dropdown-link">
                        <img src="o.movieImage" class="image">
                        <!--<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
                      </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-card class="box-card">
                        <div>类型:{{o.movieType}}</div>
                        <div>语言:{{o.movieLanguage}}</div>
                        <div>地区:{{o.movieArea}}</div>
                        <div>导演:{{o.movieDetail.dirctor}}</div>
                        <div>演员:{{o.movieDetail.actor}}</div>
                        <div>上映时间:{{o.movieDetail.movieTime}}</div>
                      </el-card>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <!--下拉信息结束-->
                  <div style="padding: 10px;">
                    <span>{{o.movieName}}</span>
                    <span>{{o.movieScore}}</span>
                    <div>类型:{{o.movieType}}</div>
                    <div>语言:{{o.movieLanguage}}</div>
                    <div>地区:{{o.movieArea}}</div>
                    <div class="bottom clearfix">
                      <time class="time">{{ o.releaseTime}}</time>
                      <el-button type="text" class="button">选座购票</el-button>
                    </div>
                  </div>
                </el-card>

              </el-col>
              </el-tab-pane>

          </el-tabs>

      </el-row>


          <div style="margin-top: 40px;margin-mid: auto">
            <img src="http://qzd3bv2qc.hb-bkt.clouddn.com/52f42ce1b95499797b2b28ff7d80a02.png"></img>
          </div>


    <my-footer></my-footer>

  </div>

</template>


<script>


  import Vue from 'vue'
  export default {

    data() {
      return {
        items:[],
        course:[],
        classfiylist:[],
        teacher:[],
        activeIndex: '1',
        activeIndex2: '1',
        currentDate: new Date(),
        key:1,
        total: 0,
        params:{
          page:1,
          size:3
        },
        value: false,
        currentDate: new Date(),
        movieswill: [],
        movies: [],
      }
    },
    methods: {
      //查询轮播图
      rotation_chart: function () {

        this.$axios.get("tpp-cloud-movie/index/index").then(res => {

          if (res.data.code == 1) {
            this.items = res.data.data;

          }
        })

      },
      //正在上映
      playingMovies: function () {
        this.$axios.get("tpp-cloud-movie/tppMovie/findByMovieHeat").then(res=>{
          if (res.data.code == 1){
            this.movies = res.data.data;
          }
        })
      },
      //即将上映
      willPlayMovies: function () {
        this.$axios.get("tpp-cloud-movie/tppMovie/findByMovieWei").then(res=>{
          if (res.data.code == 1){
            this.movieswill = res.data.data;
          }
        })
      },

    },
      mounted() {
        this.rotation_chart();
        this.playingMovies();
        this.willPlayMovies();
      },
      //字数控制在30字内
      // filters: {
      //   ellipsis(value) {
      //     if (!value) return "";
      //     if (value.length > 30) {
      //       return value.slice(0, 30) + "...";
      //     }
      //     return value;
      //   }
      // }


  }
</script>
<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  .uc-course-system_wrap .uc-course-system_item {
    width: 180px;
    height: 120px;
    margin-right: 25px;
    border-radius: 3px;
    overflow: hidden;
  }


  .uc-course-system_wrap .uc-course-system_item img {
    width: 100%;
    height: 100%;
  }

  .course_sys{
    font-size: 17px;
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
